'use client';

import { useRef } from 'react';
import { 
  Chart as ChartJS, 
  RadialLinearScale, 
  PointElement, 
  LineElement, 
  Filler, 
  Tooltip, 
  Legend,
  ChartData,
  ChartOptions
} from 'chart.js';
import { Radar } from 'react-chartjs-2';
import { useTheme } from '../context/ThemeContext';
import { themeColorConfig } from '../context/ThemeContext';

// 注册Chart.js组件
ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

type SkillRadarChartProps = {
  skills: Array<{
    category: string;
    value: number;
  }>;
  height?: number;
  width?: number;
  className?: string;
};

export default function SkillRadarChart({ 
  skills, 
  height = 400,
  width = 400,
  className = ''
}: SkillRadarChartProps) {
  const { themeColor } = useTheme();
  
  // 提取技能类别和值
  const labels = skills.map(skill => skill.category);
  const values = skills.map(skill => skill.value);
  
  // 基于当前主题设置颜色
  const primaryColor = themeColorConfig[themeColor].primary[500];
  const primaryColorLight = themeColorConfig[themeColor].primary[200];
  
  // 准备图表数据
  const data: ChartData<'radar'> = {
    labels,
    datasets: [
      {
        label: '技能水平',
        data: values,
        backgroundColor: `${primaryColorLight}80`, // 80是透明度
        borderColor: primaryColor,
        borderWidth: 2,
        pointBackgroundColor: primaryColor,
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: primaryColor,
        pointRadius: 4,
        pointHoverRadius: 6,
      },
    ],
  };
  
  // 图表配置
  const options: ChartOptions<'radar'> = {
    scales: {
      r: {
        min: 0,
        max: 10,
        ticks: {
          stepSize: 2,
          backdropColor: 'rgba(0, 0, 0, 0)', // 透明背景
          color: '#666', // 刻度文字颜色
        },
        angleLines: {
          color: 'rgba(0, 0, 0, 0.1)', // 角度线颜色
        },
        grid: {
          color: 'rgba(0, 0, 0, 0.1)', // 网格线颜色
        },
        pointLabels: {
          font: {
            size: 14,
            weight: 'bold',
          },
          color: '#333',
        },
      },
    },
    plugins: {
      legend: {
        display: false, // 不显示图例
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return `${context.label}: ${context.raw}/10`;
          }
        }
      }
    },
    maintainAspectRatio: false, // 可以自定义高度和宽度
    elements: {
      line: {
        tension: 0.2, // 线条平滑度
      },
    },
  };
  
  return (
    <div className={`relative ${className}`} style={{ height, width }}>
      <Radar data={data} options={options} />
    </div>
  );
} 